<template>
	<view class="share-wechat" v-if="showShare">
		<view class="mask-show" @tap.stop="close" v-if="showButton || showGzhStatus"></view>
		<view class="bottom" v-if="showButton">
			<view class="share-list flex align-center">
				<button class="w33 button" open-type="share" hover-class="none" :plain="true" >
					<view class="share-icon"><text class="iconfont icon-weixin"></text></view>
					<view class="share-title"><text>微信好友</text></view>
				</button>
				
				<button class="w33 button" hover-class="none" :plain="true" @tap.stop="createsShareImage">
					<view class="share-icon"><text class="iconfont icon-haibao"></text></view>
					<view class="share-title"><text>二维码</text></view>
				</button>
				<button class="w33 button" hover-class="none" :plain="true" @tap.stop="copyLink(posterData.qrcodeUrl,'link')">
					<view class="share-icon"><text class="iconfont icon-lianjie"></text></view>
					<view class="share-title"><text>复制链接</text></view>
				</button>
				<button class="w33 button" hover-class="none" :plain="true" @tap.stop="showGzhFuc">
					<view class="share-icon"><text class="iconfont icon-gongzhonghao"></text></view>
					<view class="share-title"><text>嵌入公众号</text></view>
				</button>
			</view>
			<view class="cancel-share" @tap.stop="close">取消</view>
		</view>
		<view class="gongzhonghao" v-if="showGzhStatus" :style="{'top':addCheckTop+'rpx'}">
			<view class="title">接入公众号<text class="iconfont icon-guanbi" @tap.stop="close"></text></view>
			<view class="gongzhonghao-content">
				
				<view class="detail flex align-center">
					<view class="desc-title">AppID</view>
					<view class="appid">{{appId}}</view>
					<view class="copy" @tap.stop="copyLink(appId)">复制</view>
				</view>
			</view>
			<view class="gongzhonghao-content">
				<view class="detail flex align-center">
					<view class="desc-title">小程序路径</view>
					<view class="appid">{{appPath}}</view>
					<view class="copy" @tap.stop="copyLink(appPath)">复制</view>
				</view>
			</view>
			<view class="set-url" @tap="locationUrl">查看详细设置方法>></view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				showShare:false,
				showButton:false,
				showGzhStatus:false,
				posterData: {
					qrcodeUrl:'',
				},
				appId:'',
				appPath:''
			}
		},
		mounted() {
			var myconfig = this.myconfig;
			this.appId = this.$api.getSystemConfig('wxMiniProgram.appid');//myconfig.appId; 
			//console.log(this.addCheckTop)
		},
		props:{
			addCheckTop:{
				type:[String,Number],
				default:300
			}
		},
		methods: {
			locationUrl(){
				this.$api.navigateTo(this.$api.getSystemConfig('useGzhNewsUrl'),2); 
			}, 
			showGzhFuc(){
				this.showButton = false;
				this.showGzhStatus = true;
			},
			copyLink(content,type){
				this.$api.copyText(content);
				if(type == 'link')
				{
					this.close();
				}
			},
			// 生成分享图片
			createsShareImage(){
				uni.setStorageSync('share-poster-data',this.posterData);
				this.$api.navigateTo('/pages/common/share-qrcode');
				this.close();
				return;
			},
			close(){
				this.showShare = false;
				this.showGzhStatus = false;
				this.$emit('close',{});
			},
			setShowStatus(status,posterData){
				this.showShare = status;
				this.showButton = true;
				if(posterData)
				{
					this.posterData = posterData;
					this.appPath = posterData.path?posterData.path:'';
				}
			}
		}
	}
</script>

<style lang="scss">
	.gongzhonghao{
		position: fixed;
		background: #ffffff;
		top: 300rpx;
		left: 80rpx;
		z-index: 102;
		width: 600rpx;
		height: 500rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		.set-url{
			color: $uni-btn-color;
			font-size: 24rpx;
			text-align: center;
			margin-top: 26rpx;
		}
		.title{
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-weight: 600;
			.iconfont{
				position: absolute;
				right: 12px;
				top: 0;
				font-size: 60rpx;
				color: $uni-btn-color;
				font-weight: normal;
			}
		}
		.gongzhonghao-content{
			height: 120rpx;
			.detail{
				background: #F8F8FA;
				color: #999999;
				height: 100rpx;
				border-radius: 20rpx;
				margin-top: 10rpx;
				position: relative;
				.desc-title{
					color:#000000;
					font-weight: bold;
					padding-left: 10rpx;
					font-size: 26rpx;
				}
				.appid{
					width: 360rpx;
					overflow: hidden;
					margin-right: 20rpx;
					padding-left: 10rpx;
					font-size: 26rpx;
					height: 100rpx;
					line-height: 100rpx;
				}
				.copy{
					color: #ffffff;
					height: 60rpx;
					padding: 0 30rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					border-radius: 20rpx;
					position: absolute;
					right: 0;
					background: $uni-btn-color;
				}
			}
		}
	}
	.share-wechat{
		.bottom{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 102;
			background: #ffffff;
			width: 100%;
			height: 280rpx;
			.share-list{
				padding: 0 0rpx;
			}
			.w33{
				width: 25%;
				height: 200rpx;
			}
			.button{
				border: none;
			}
			.share-icon{
				width: 100%;
				height: 140rpx;
				text-align: center;
				margin-top: -38rpx;
				color: #7FC179;
				.iconfont{
					font-size: 90rpx;
				}
				.icon-weixin-qun{
					color: #56BF69;
				}
				.icon-haibao{
					color: #EFB965;
				}
			}
			.share-title{
				font-size: 26rpx;
				color: #666666;
				margin-top: 20rpx;
			}
			.cancel-share{
				background: #F7F7F7;
				color: #999999;
				text-align: center;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
</style>
